<template>
   <div>
     <el-form
         :label-position=position
         label-width="100px"
         style="max-width: 460px"
         class="fromBasePosition"
         :rules="rules"
         ref="form"
         :model="ruleForm"
     >
       <h3>注册用户</h3>

       <el-form-item label="用户名"  prop="username">
         <el-input v-model="ruleForm.username" placeholder="请输入用户名"/>
       </el-form-item>

       <el-form-item label="密码"  prop="password">
         <el-input v-model="ruleForm.password" type="password" placeholder="请输入密码" show-password="true"/>
       </el-form-item>

       <el-form-item label="学号"  prop="number">
         <el-input v-model="ruleForm.number"  placeholder="请输入学号"/>
       </el-form-item>

       <el-form-item label="专业" prop="major" >
         <el-select v-model="ruleForm.major" placeholder="请选择专业" style="width: 360px">
           <el-option
               v-for="item in ruleForm.options"
               :key="item.value"
               :label="item.label"
               :value="item.value">
           </el-option>
         </el-select>
       </el-form-item>

       <el-form-item label="手机号"  prop="phone">
         <el-input v-model="ruleForm.phone"  placeholder="请输入手机号"/>
       </el-form-item>
       <el-button type="success" @click="Register" :plain="true">注册</el-button>

     </el-form>
   </div>
</template>
<script>
import axios from 'axios'
  export default {
    data(){
      const checkPhone = (rule, value, callback)=>{
        const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
        if (!value) {
          return callback(new Error('电话号码不能为空'))
        }
        setTimeout(() => {
          if (!Number.isInteger(+value)) {
            callback(new Error('请输入数字值'))
          } else {
            if (phoneReg.test(value)) {
              callback()
            } else {
              callback(new Error('电话号码格式不正确'))
            }
          }
        }, 100)
      }
      return{
        ruleForm:{
          username:"",
          password:"",
          phone:"",
          number:"",
          options: [{
              value: '1',
              label: '大数据'
            }, {
              value: '2',
              label: '电子'
            }, {
              value: '3',
              label: '计科'
            }, {
              value: '4',
              label: '数媒'
            }, {
              value: '选项5',
              label: '物联网'
            }],
          major:""
        },
        position:"right",
        rules:{
          username:[
            {required:true,trigger:'blur',message:'请输入用户名'},
            { min: 3, max: 10, message: "长度在 3 到 10个字符", trigger: "blur" },
          ],
          password: [
            {required:true,trigger:'blur',message:'请输入密码'},
            { min: 3, max: 10, message: "长度在 3 到 10个字符", trigger: "blur" },
          ],
          phone: [
            {required:true,trigger:'blur',message:'请输入正确的手机号',validator: checkPhone}
          ],
          number:[{required:true,trigger:'blur',message:'请输入学号'}],
          major: [{required:true,trigger:'blur',message:'请选择专业'}]
        },
      };
    },
    methods:{
      Register(){
        this.$refs.form.validate((isPass)=>{
            if(isPass){
              //将用户创建的数据插入到user表中
              axios({
                method:'post',
                url:'api/users/register',
                data:{
                  "username":this.ruleForm.username,
                  "password":this.ruleForm.password,
                  "phone":this.ruleForm.phone,
                }
              }).then(res=>{
                if (res.data.code === 200) {
                  //插入成功则跳转到登录页面
                  this.$message({
                    message:res.data.msg,
                    type: 'success'
                  });
                  this.$router.push('/');
                }else if(res.data.code === 500){
                  //若用户名已存在则提示
                 this.$message({
                   message:res.data.msg,
                   type: 'warning'
                 });
                }else{
                  //失败则在控制台打印信息
                 this.$message.error(res.data.msg);
                }

              }).then(res=>{
                  axios({
                    method:'post',
                    url:'api//users/updateInfo',
                    data:{
                      "name":this.ruleForm.username,
                      "number":this.ruleForm.number,
                    }
                  })
              })
            }
        })
      },
    }
  }
</script>
<style scoped>
.fromBasePosition{
  margin:180px auto;
  border: 1px solid #f6f6f6;
  padding: 35px 35px 15px 35px;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 0 25px #cac6c6;

}
</style>